<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll</title>

    <!-- jQuery Include -->
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <!-- Bootstrap Include -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 

    <!-- Mobiscroll JS and CSS Includes -->
    <link href="css/mobiscroll.custom-2.17.1.min.css" rel="stylesheet" type="text/css" />
    <script src="js/mobiscroll.custom-2.17.1.min.js" type="text/javascript"></script>

    <style>
		


.demo-marked {
    padding: 0!important;
}

.md-marked .md-marked-points {
    display: inline-block;
    vertical-align: middle;
    width: 7px;
    height: 7px;
    margin: 0 4px 0 0;
    border-radius: 7px;
    background: #aaa;
}

.md-marked .md-ponts-type1 {
    background: rgb(34, 139, 34);
}

.md-marked .md-ponts-type2 {
    background: rgb(163, 0, 38);
}

.md-marked .md-ponts-type3 {
    background: rgb(204, 204, 0);
}

.md-marked .md-ponts-type4 {
    background: rgb(28, 161, 227);
}

.md-marked .md-ponts-type5 {
    background: rgb(250, 104, 0);
}

.md-i-hide {
    display: none;
}



    </style>
</head>
<body>
    



<div class="md-marked">
    <div id="demo" placeholder="Please Select..."></div>

    <ul class="md-marked-list" style="display:none">
        <li>
            <span class="md-marked-points md-ponts-type1"></span> Garbage collection
        </li>
        <li>
            <span class="md-marked-points md-ponts-type2"></span> Special events
        </li>
        <li>
            <span class="md-marked-points md-ponts-type3"></span> Town council meeting
        </li>
        <li>
            <span class="md-marked-points md-ponts-type4"></span> Town hall closed
        </li>
        <li>
            <span class="md-marked-points md-ponts-type5"></span> National holidays
        </li>
    </ul>
</div>




</body>

</html>

<script type="text/javascript">
	

$(function () {
    var now = new Date();

    $('#demo').mobiscroll().calendar({
        lang: 'zh',
        display: 'inline',
        layout: 'liquid',
        theme: 'default',
        markedDisplay: 'bottom',
        marked: [{
            d: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 6),
            color: 'rgb(28, 161, 227)'
        }, {
            d: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 8),
            color: 'rgb(28, 161, 227)'
        }, {
            d: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 9),
            color: 'rgb(28, 161, 227)'
        }, {
            d: new Date(now.getFullYear(), now.getMonth() + 1, 15),
            color: 'rgb(28, 161, 227)'
        }, {
            d: '11/30',
            color: 'rgb(163, 0, 38)'
        }, {
            d: '5/23',
            color: 'rgb(163, 0, 38)'
        }, {
            d: '3/12',
            color: 'rgb(163, 0, 38)'
        }, {
            d: '14',
            color: 'rgb(204,204,0)'
        }, {
            d: 'w5',
            color: 'rgb(34, 139, 34)'
        }, {
            d: '1/1',
            color: 'rgb(250,104,0)'
        }, {
            d: '1/2',
            color: 'rgb(250,104,0)'
        }, {
            d: '6/4',
            text: '5999￥',
            color: 'rgb(250,104,0)'
        }, {
            d: '8/4',
            text: 'nessage',
            color: 'rgb(0,0,0)'
        }, {
            d: '12/25',
            color: 'rgb(250,104,0)'
        }, {
            d: '12/26',
            color: 'rgb(250,104,0)'
        }]
    });

    $('.md-marked-list').mobiscroll().listview({
        theme: 'default',
        display: 'bottom',
        swipe: false
    });

});




/*$(function () {
    var booked = [],
        invalid = ['w1'],
        now = new Date(),
        max = new Date(now.getFullYear(), now.getMonth() + 6, now.getDate(), now.getHours(), now.getSeconds(), now.getMilliseconds()),
        firstMonth = generateMonthEvents(now.getFullYear(), now.getMonth());

    booked = firstMonth.events;
    invalid = invalid.concat(firstMonth.invalid);

    $('#demo').mobiscroll().calendar({
        theme: 'default',
        display: 'inline',
        layout: 'liquid',
        lang: 'zh',
        controls: ['calendar'],
        min: now,
        max: max,
        invalid: invalid,
        events: booked,
        onMonthLoading: function (event, inst) {
            var newItems,
                isEventsLoaded = (inst.settings.events).filter(function (v) {
                    return v.d.getMonth() == event.month + 1;
                }).length;

            if (!isEventsLoaded) {
                newItems = generateMonthEvents(event.year, event.month + 1);
                inst.settings.events = inst.settings.events.concat(newItems.events);
                inst.settings.invalid = inst.settings.invalid.concat(newItems.invalid);
                inst.redraw();
            }
        }
    });

    function getRandomDay() {
        return Math.floor(Math.random() * 100) % 28 + 1;
    }

    function generateMonthEvents(year, month) {
        var isDisabled,
            tempDay,
            invalid = [],
            events = [],
            disabledDays = [getRandomDay()];

        for (var i = 1; i <= new Date(year, month + 1, 0).getDate(); ++i) {
            tempDay = new Date(year, month, i, now.getHours(), now.getSeconds(), now.getMilliseconds());
            if (tempDay.getTime() >= now.getTime() && tempDay.getTime() <= max.getTime()) {
                isDisabled = disabledDays.indexOf(i) !== -1 || tempDay.getDay() == 1;
                if (isDisabled) {
                    invalid.push(tempDay);
                }
                events.push({
                    d: tempDay,
                    text: isDisabled ? (tempDay.getDay() == 1 ? 'CLOSED' : 'FULL') : Math.round(Math.random() * 10) % 5 + 2 + ' SPOTS',
                    color: isDisabled ? '#ccc' : '#8ada8a'
                });
            }
        }

        return {
            events: events,
            invalid: invalid
        };
    }

});*/





/*$(function () {
    var booked = [],
        invalid = ['w1'],
        now = new Date(),
        max = new Date(now.getFullYear(), now.getMonth() + 6, now.getDate(), now.getHours(), now.getSeconds(), now.getMilliseconds()),
        firstMonth = generateMonthEvents(now.getFullYear(), now.getMonth());

    booked = firstMonth.events;
    invalid = invalid.concat(firstMonth.invalid);

    $('#demo').mobiscroll().calendar({
    	display: 'inline',
        layout: 'liquid',
        theme: 'ios',
        lang: 'zh',
        controls: ['calendar'],
        min: now,
        max: max,
        invalid: invalid,
        events: booked,
        onMonthLoading: function (event, inst) {
            var newItems,
                isEventsLoaded = (inst.settings.events).filter(function (v) {
                    return v.d.getMonth() == event.month + 1;
                }).length;

            if (!isEventsLoaded) {
                newItems = generateMonthEvents(event.year, event.month + 1);
                inst.settings.events = inst.settings.events.concat(newItems.events);
                inst.settings.invalid = inst.settings.invalid.concat(newItems.invalid);
                inst.redraw();
            }
        }
    });

    function getRandomDay() {
        return Math.floor(Math.random() * 100) % 28 + 1;
    }

    function generateMonthEvents(year, month) {
        var isDisabled,
            tempDay,
            invalid = [],
            events = [],
            disabledDays = [getRandomDay(), getRandomDay(), getRandomDay(), getRandomDay()];

        for (var i = 1; i <= new Date(year, month + 1, 0).getDate(); ++i) {
            tempDay = new Date(year, month, i, now.getHours(), now.getSeconds(), now.getMilliseconds());
            if (tempDay.getTime() >= now.getTime() && tempDay.getTime() <= max.getTime()) {
                isDisabled = disabledDays.indexOf(i) !== -1 || tempDay.getDay() == 1;
                if (isDisabled) {
                    invalid.push(tempDay);
                }
                events.push({
                    d: tempDay,
                    text: isDisabled ? (tempDay.getDay() == 1 ? 'CLOSED' : 'FULL') : Math.round(Math.random() * 10) % 5 + 2 + ' SPOTS',
                    color: isDisabled ? '#ccc' : '#8ada8a'
                });
            }
        }

        return {
            events: events,
            invalid: invalid
        };
    }

});
*/






</script>
